<template>
  <div>
    <SearchContainer @search="getData" @reset="() => formRef.resetFields()">
      <a-form ref="formRef" class="form-style-flex" :model="formState" :label-col="{ style: { width: '80px' } }">
        <a-form-item name="zjm">
          <a-input v-model:value="formState.zjm" class="w-[300px]" placeholder="姓名/助记码/床位号/身份证号" />
        </a-form-item>
        <a-form-item name="dateRange" label="隔离日期">
          <a-range-picker v-model:value="formState.dateRange" class="w-[280px]" format="YYYY-MM-DD " value-format="YYYY-MM-DD" />
        </a-form-item>
        <a-form-item name="isolateReasonCode" label="隔离原因">
          <!-- <SelectItem v-model:value="formState.isolateReasonCode" class="!w-[200px]" type="DT00301" placeholder="请选择" /> -->
          <a-input v-model:value="formState.isolateReasonCode" class="w-[300px]" placeholder="请输入" />
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2">
      <div class="flex mb-2">
        <a-button> 导出 </a-button>
      </div>
      <BaseTable fill :data-source="tableData" :loading="loading" column-code="000694" :pagination="pagination">
        <template #bodyCell="{ column, index }">
          <template v-if="column.dataIndex === 'xh'">
            {{ index + 1 }}
          </template>
        </template>
      </BaseTable>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import SearchContainer from '@/components/SearchContainer'
import BaseTable from '@/components/BaseTable'

const formRef = ref(null)
// const { empId } = useUserStore()
const formState = ref({
  dateRange: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
})

const { loading, tableData, pagination, getData } = useTable({
  url: '/war/epidemicStatistics/getEpidemicIsolateStatisticsList',
  immediate: true,
  formatParams: () => {
    return {
      ...formState.value,
      startDate: formState.value.dateRange?.[0],
      endDate: formState.value.dateRange?.[1]
    }
  }
})
</script>
